12.1 JQuery 基础

12.1.1 概念及入门

概念

一个JavaScript框架。简化JS开发

  jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优 化HTML文档操作、事件处理、动画设计和Ajax交互。
  JavaScript框架：本质上就是一些js文件，封装了js的原生代码而已

快速入门

  1. 下载JQuery，目前jQuery有三个大版本：

    • 1.x：兼容ie678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了。目前最终版本为：1.12.4 (2016年5月20日)。
    • 2.x：不兼容ie678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x。最终版本：2.2.4 (2016年5月20日)。
    • 3.x：不兼容ie678，只支持最新的浏览器。除非特殊要求，一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本。

    jquery-xxx.js 与jquery-xxx.min.js区别：
      1、jquery-xxx.js：开发版本。给程序员看的，有良好的缩进和注释。体积大一些
      2、jquery-xxx.min.js：生产版本。程序中使用，没有缩进。体积小一些。程序加载更快

  2. 导入JQuery的js文件：导入min.js文件

  3. 使用

    1
    2
    var div1 = $("#div1");
    alert(div1.html());

JQuery对象和JS对象区别与转换

  1. JQuery对象在操作时，更加方便。
  2. JQuery对象和js对象方法不通用的.
  3. 两者相互转换

    jq ===> js：jq对象[索引]或者jq对象.get(索引)
    js ===> jq：$(js对象)

12.1.2 选择器

概念

  • 选择器：筛选具有相似特征的元素(标签)

基本操作

  1. 事件绑定

    1
    2
    3
    4
    //1.获取b1按钮
    $("#b1").click(function(){
        alert("abc");
    });

  2. 入口函数

    1
    2
    3
    $(function () {
        ...
    });

    window.onload 和 $(function)区别
      1、window.onload 只能定义一次，如果定义多次，后边的会将前边的覆盖掉
      2、$(function) 可以定义多次的。

  3. 样式控制：css方法

    1
    2
    // $("#div1").css("background-color","red");
    $("#div1").css("backgroundColor","pink");

分类

① 基本选择器

  • 标签选择器（元素选择器）
    • 语法：$("html标签名")获得所有匹配标签名称的元素
  • id选择器
    • 语法：$("#id的属性值")获得与指定id属性值匹配的元素
  • 类选择器
    • 语法：$(".class的属性值")获得与指定的class属性值匹配的元素
  • 并集选择器
    • 语法：$("选择器1,选择器2....")获取多个选择器选中的所有元素

② 层级选择器

  • 后代选择器
    • 语法：$("A B ")选择A元素内部的所有B元素
  • 子选择器
    • 语法：$("A > B")选择A元素内部的所有B子元素

③ 属性选择器

  • 属性名称选择器
    • 语法：$("A[属性名]")包含指定属性的选择器
  • 属性选择器
    • 语法：$("A[属性名='值']")包含指定属性等于指定值的选择器
  • 复合属性选择器
    • 语法：$("A[属性名='值'][]...")包含多个属性条件的选择器

④ 过滤选择器

  • 首元素选择器
    • 语法：:first获得选择的元素中的第一个元素
  • 尾元素选择器
    • 语法：:last获得选择的元素中的最后一个元素
  • 非元素选择器
    • 语法：:not(selector)不包括指定内容的元素
  • 偶数选择器
    • 语法：:even偶数，从 0 开始计数
  • 奇数选择器
    • 语法：:odd奇数，从 0 开始计数
  • 等于索引选择器
    • 语法：:eq(index)指定索引元素
  • 大于索引选择器
    • 语法：:gt(index)大于指定索引元素
  • 小于索引选择器
    • 语法：:lt(index)小于指定索引元素
  • 标题选择器
    • 语法：:header获得标题（h1~h6）元素，固定写法

⑤ 表单过滤选择器

  • 可用元素选择器
    • 语法：:enabled获得可用元素
  • 不可用元素选择器
    • 语法：:disabled获得不可用元素
  • 选中选择器
    • 语法：:checked获得单选/复选框选中的元素
  • 选中选择器
    • 语法：:selected获得下拉框选中的元素